<template>
	<view class="control-page">
		<framelayout>
			<uni-forms slot='configure' ref="form" :modelValue="data" label-width='25%' class='form'>
				<uni-forms-item label="name" required>
					<uni-easyinput type="text" v-model="data.name" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="money" required>
					<uni-easyinput type="number" v-model="data.money" placeholder="请输入可体现金额（元）" />
				</uni-forms-item>
				<uni-forms-item label="yesterday" required>
					<div class="box">
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday0"
							placeholder="请输入结算接单数(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday1"
							placeholder="请输入结算接单数(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday2"
							placeholder="请输入结算佣金收入(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday3"
							placeholder="请输入付款订单数(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday4"
							placeholder="请输入佣金金额(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday5"
							placeholder="请输入预估佣金收入(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday6"
							placeholder="请输入未退款订单数(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday7"
							placeholder="请输入未退款金额(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday8"
							placeholder="请输入未退款预估佣金(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday9"
							placeholder="请输入退款付款订单数(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday10"
							placeholder="请输入退款金额(昨日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.yesterday11"
							placeholder="请输入退款预估佣金(昨日)" />
					</div>
				</uni-forms-item>
				<uni-forms-item label="today" required>
					<div class="box">
						<uni-easyinput class='box-inp' type="text" v-model="data.today0" placeholder="请输入结算接单数(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today1" placeholder="请输入结算接单数(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today2" placeholder="请输入结算佣金收入(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today3" placeholder="请输入付款订单数(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today4" placeholder="请输入佣金金额(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today5" placeholder="请输入预估佣金收入(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today6" placeholder="请输入未退款订单数(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today7" placeholder="请输入未退款金额(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today8" placeholder="请输入未退款预估佣金(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today9" placeholder="请输入退款付款订单数(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today10" placeholder="请输入退款金额(今日)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.today11" placeholder="请输入退款预估佣金(今日)" />
					</div>
				</uni-forms-item>
				<uni-forms-item label="almostAWeek" required>
					<div class="box">
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek0"
							placeholder="请输入结算接单数(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek1"
							placeholder="请输入结算接单数(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek2"
							placeholder="请输入结算佣金收入(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek3"
							placeholder="请输入付款订单数(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek4"
							placeholder="请输入佣金金额(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek5"
							placeholder="请输入预估佣金收入(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek6"
							placeholder="请输入未退款订单数(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek7"
							placeholder="请输入未退款金额(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek8"
							placeholder="请输入未退款预估佣金(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek9"
							placeholder="请输入退款付款订单数(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek10"
							placeholder="请输入退款金额(近7天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.almostAWeek11"
							placeholder="请输入退款预估佣金(近7天)" />
					</div>
				</uni-forms-item>
				<uni-forms-item label="nearlyAMonth" required>
					<div class="box">
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth0"
							placeholder="请输入结算接单数(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth1"
							placeholder="请输入结算接单数(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth2"
							placeholder="请输入结算佣金收入(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth3"
							placeholder="请输入付款订单数(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth4"
							placeholder="请输入佣金金额(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth5"
							placeholder="请输入预估佣金收入(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth6"
							placeholder="请输入未退款订单数(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth7"
							placeholder="请输入未退款金额(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth8"
							placeholder="请输入未退款预估佣金(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth9"
							placeholder="请输入退款付款订单数(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth10"
							placeholder="请输入退款金额(近30天)" />
						<uni-easyinput class='box-inp' type="text" v-model="data.nearlyAMonth11"
							placeholder="请输入退款预估佣金(近30天)" />
					</div>
				</uni-forms-item>
				<u-button text="提交" :customStyle="{width:'80px'}" type="primary" @click="submit"></u-button>
			</uni-forms>
			<commission slot='preview' :configureData='data' :isDisplay='true'></commission>
		</framelayout>
	</view>
</template>

<script>
	import framelayout from "./framelayout.vue"
	import commission from "@/pages/commission/commission.vue"
	import {
		dataBaseMixin
	} from "@/mixins/dataBaseMixin.js"
	export default {
		mixins: [dataBaseMixin],
		components: {
			framelayout,
			commission,
		},
		data() {
			return {
				data: {}
			}
		},
		mounted() {
			this.getData('commissionData')
		},
		methods: {
			// 提交
			submit() {
				this.updateData('commissionData')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.control-page {
		.form {
			padding: 10px;
		}

		::v-deep .uni-forms-item__content {
			display: flex;
			flex-wrap: wrap;
		}

		.box {
			width: 100%;

			.box-inp {
				width: 100%;
				margin-top: 3px;
			}
		}

		.img {
			max-width: 100px;
		}
	}
</style>
